<template>
  <button @click="increment">点击了{{ count }}次</button>
</template>

<script>
// 引入
import { ref, onMounted, onUpdated } from "vue";

// 引入抽离出去的组合式函数
import useCount from "./hooks/useCount";
import useTitle from "./hooks/useTitle";

export default {
  /**
   * setup 函数开启组合式入口
   *   1. 会在创建之前执行一次
   */
  setup() {
    // 通过 ref 方法创建了一个响应式数据
    // const count = ref(0);
    // console.log("count", count);

    // // 定义一个函数
    // const increment = () => {
    //   console.log("increment");
    //   // 修改数据
    //   count.value++;
    // };

    // 注册生命周期钩子函数
    onMounted(() => {
      document.title = `${count.value} 次`;
    });

    onUpdated(() => {
      document.title = `${count.value} 次`;
    });

    // 调用抽离出去的组合式函数
    const { count, increment } = useCount();
    useTitle(count);

    // 数据或方法或计算属性等等需要在模板中使用时，需要 return
    return {
      count,
      increment,
    };
  },
};
</script>
